-
Notifications
You must be signed in to change notification settings - Fork 9
Template changes #27
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Template changes #27
Conversation
| <style> | ||
| #blazor-error-ui { | ||
| background: lightyellow; | ||
| bottom: 0; | ||
| box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); | ||
| display: none; | ||
| left: 0; | ||
| padding: 0.6rem 1.25rem 0.7rem 1.25rem; | ||
| position: fixed; | ||
| width: 100%; | ||
| z-index: 1000; | ||
| } | ||
| #blazor-error-ui .dismiss { | ||
| cursor: pointer; | ||
| position: absolute; | ||
| right: 3.5rem; | ||
| top: 0.5rem; | ||
| } | ||
| .blazor-error-boundary { | ||
| background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; | ||
| padding: 1rem 1rem 1rem 3.7rem; | ||
| color: white; | ||
| } | ||
| .blazor-error-boundary::after { | ||
| content: "An error has occurred." | ||
| } | ||
| html { | ||
| font-family: system-ui; | ||
| } | ||
| button { | ||
| background-color: #a4e1f2; | ||
| border-style: none; | ||
| /* border-width: 2px; | ||
| border-color: #245e6f; */ | ||
| color: black; | ||
| font-size: medium; | ||
| padding-left: 8px; | ||
| padding-right: 8px; | ||
| padding-bottom: 4px; | ||
| padding-top: 4px; | ||
| } | ||
| button:hover { | ||
| background-color: #c9eff4; | ||
| cursor: pointer; | ||
| } | ||
| button:disabled { | ||
| background-color: #e5f1f5; | ||
| color: #96b4bd; | ||
| border-color: #96b4bd; | ||
| } | ||
| .experiment-settings { | ||
| display: flex; | ||
| gap: 0.25em; | ||
| flex-direction: column; | ||
| float: left; | ||
| margin-right: 1em; | ||
| height: 10000px; /*MOD*/ | ||
| } | ||
| .experiment-results { | ||
| display: flex; | ||
| gap: 10px; | ||
| flex-wrap: wrap; | ||
| align-items: flex-start; | ||
| } | ||
| .compare { | ||
| display: flex; | ||
| gap: 10px; | ||
| margin-bottom: 10px; | ||
| flex-wrap: wrap; | ||
| align-items: flex-start; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| } | ||
| td, th { | ||
| border: none; | ||
| padding: 4px; | ||
| } | ||
| tr:hover { background-color: #e7f2f1; } | ||
| th { | ||
| padding-top: 6px; | ||
| padding-bottom: 6px; | ||
| text-align: left; | ||
| background-color: #4a96af; | ||
| color: white; | ||
| font-size: smaller; | ||
| } | ||
| </style> | ||
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why?
SeeSharp.Blazor/FlipViewer.razor
Outdated
| bool AltKey,//MOD *@ | ||
| string key, | ||
| bool isPressedDown, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| bool isPressedDown, | |
| bool isPressed, |
redundant
SeeSharp.Blazor/FlipViewer.razor
Outdated
| @* bool CtrlKey, | ||
| bool AltKey,//MOD *@ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
?
SeeSharp.Blazor/FlipViewer.razor
Outdated
| int mouseButtom, | ||
| bool isButtomDown, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| int mouseButtom, | |
| bool isButtomDown, | |
| int mouseButton, | |
| bool isButtonDown, |
SeeSharp.Blazor/FlipViewer.razor
Outdated
| int deltaY,//MOD | ||
| int selectedIndex,//MOD | ||
| string registryKey//MOD |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what does //MOD mean?
| // IMPORTANT: There is a bool for altKey, but on the React side a wheel event only is fired when alt is pressed, so altKey is more or less redundant | ||
| [JSInvokable] | ||
| public void _OnFlipClick(int x, int y, _OnFlipClickArgs eventArgs) | ||
| public void _OnFlipWheel(int deltaY) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if fwd-ing the wheel is a good idea from a usability perspective. What's the usage scenario?
SeeSharp.Blazor/Scripts.cs
Outdated
| // let onKeyUp = null | ||
| // if (onKeyUpObj && onKeyUpMethodName) { | ||
| // onKeyUp = (evt, selectedIdx, keyStr) => | ||
| // onKeyUpObj.invokeMethodAsync(onKeyUpMethodName, { ctrlKey: evt.ctrlKey, altKey: evt.altKey, deltaY: evt.deltaY, selectedIndex: selectedIdx, registryKey: keyStr }) | ||
| // } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| // let onKeyUp = null | |
| // if (onKeyUpObj && onKeyUpMethodName) { | |
| // onKeyUp = (evt, selectedIdx, keyStr) => | |
| // onKeyUpObj.invokeMethodAsync(onKeyUpMethodName, { ctrlKey: evt.ctrlKey, altKey: evt.altKey, deltaY: evt.deltaY, selectedIndex: selectedIdx, registryKey: keyStr }) | |
| // } |
Seems to me that the current logic to only fwd pressed keys once should suffice for most use cases. So you might want to remove these commented out leftovers everywhere
| } *@ | ||
| @* <button @onclick="OnDownloadClick">Download results</button> *@ | ||
| </div> | ||
| <h3>Compare Example (SVCM, VCM)</h3> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SVCM might need replacing here?
| // Only here for the example to show some possibilities | ||
| struct ExampleImageGenerator { | ||
| public Image rndImage(float strength, int width, int height, bool colored) { | ||
| Image image = new Image(width, height, 3); | ||
| RNG rng = new RNG(); | ||
|
|
||
| for (int y = 0; y < height; y++) { | ||
| for (int x = 0; x < width; x++) { | ||
| if (colored) { | ||
| image.SetPixelChannel(x, y, 0, rng.NextFloat(0.5f - strength, 0.5f + strength)); | ||
| image.SetPixelChannel(x, y, 1, rng.NextFloat(0.5f - strength, 0.5f + strength)); | ||
| image.SetPixelChannel(x, y, 2, rng.NextFloat(0.5f - strength, 0.5f + strength)); | ||
| } else { | ||
| float value = rng.NextFloat(0.5f - strength, 0.5f + strength); | ||
|
|
||
| image.SetPixelChannel(x, y, 0, value); | ||
| image.SetPixelChannel(x, y, 1, value); | ||
| image.SetPixelChannel(x, y, 2, value); | ||
| } | ||
|
|
||
| } | ||
| } | ||
|
|
||
| return image; | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure if we want this in the template if it has to be removed every time.
We could create a separate example project for this stuff, and trim the template back down to the essentials.
| struct ListenerState { | ||
| public ListenerState() { } | ||
|
|
||
| /// <summary> | ||
| /// The index of the selected image of the current selected flipbook (selected by clicking on it) | ||
| /// </summary> | ||
| public int selectedIndex = 0; | ||
|
|
||
| /// <summary> | ||
| /// Number between 0 and NumSamples. Can be used if data is stored from different iterations | ||
| /// </summary> | ||
| public int currIteration = 0; | ||
|
|
||
| public bool altKeyPressed = false; | ||
| public bool ctrlKeyPressed = false; | ||
| public int currX = 0; | ||
| public int currY = 0; | ||
|
|
||
| /// <summary> | ||
| /// The key of the current flipbook in string form and concatenated with ',' | ||
| /// </summary> | ||
| public string currFlipKey = ""; | ||
| } | ||
|
|
||
| /// <summary> | ||
| /// Differences between event type so update methods for flipbooks can ignore events | ||
| /// </summary> | ||
| enum FiredType { | ||
| Click = 0, | ||
| Move = 1, | ||
| Wheel = 2, | ||
| KeyDown = 4, | ||
| KeyUp = 8, | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks like this is generic enough to become part of the SeeSharp.Blazor lib rather than cluttering the experiment code
…iment where ListenerStates, Flipbook registry lie in -> Experiment now inherits from BaseExperiment
No description provided.